<template>
	
	 <el-drawer v-model="dialogVisible"
		:title="dialogTitle"
		:before-close="closeDialog"
		class="elDiaLog"
		lock-scroll 
		:close-on-click-modal="false" 
		:close-on-press-escape="false"
		 direction="rtl" size="80%"
		>
		<div class="form-box list-info"  v-loading="loading">
			<div class="card-row" style="margin-bottom: 20px;">
			    <div class="card-left">
			        <el-button type="success"  @click="openDialog('add_art')">
						<template #icon><i-ep-plus /></template>新增
					</el-button>
			        <el-button type="danger"  @click="handleDelete()" :disabled="ids.length === 0">
						<template #icon><i-ep-delete /></template>删除
					</el-button>
			    </div>
			    <div class="card-right"></div>
			</div>
			<el-table 
			    :data="dataList"
			    v-loading="loading" 
			    align="left" tooltip-effect="dark"
			    @selection-change="handleSelectionChange"
			    :show-overflow-tooltip="true"  border>
			    <el-table-column type="selection" width="55" align="center" />
			    <el-table-column label="id" property="id" width="60" align="center" />
				<el-table-column label="标题" property="title" align="center" />
			    <el-table-column label="进度说明" property="content" align="center" />
			    <el-table-column label="进度日期" property="date" align="center" width="150" /> 
			   <el-table-column label="附件" property="date" align="center" width="150">
				 <template #default="scope">
					<template v-if="scope.row.files.length>0">
						<el-link @click="openDialog('detail_art',scope.row)" type="primary"> {{scope.row.files.length}}<template #icon><i-ep-link/></template>附件</el-link>	
					</template>
						<el-text  v-else type="info">无</el-text >
				 </template>	
			   </el-table-column>
				<el-table-column fixed="right" align="center" label="操作" width="200">
			        <template #default="scope">
			            <el-button type="primary" size="small" link @click="openDialog('edit_art',scope.row)">
			               <template #icon><i-ep-edit /></template>编辑
			            </el-button>
						<el-button type="primary" size="small" link @click="openDialog('detail_art',scope.row)">
						   <template #icon><i-ep-edit /></template>查看
						</el-button>
			            <el-button type="danger" size="small" link @click="handleDelete(scope.row.id)">
			               <template #icon><i-ep-delete /></template>删除
			            </el-button>
			        </template>
			    </el-table-column>
			</el-table>
		</div>
	
		<!-- 编辑 or 添加 -->
		<aggravateListProgressEdit
			v-if="dialogAdd.visible"
			v-model="dialogAdd.visible"
			:dialogTitle="dialogAdd.title"
			:dialogTableValue="dialogAdd.value"
			:dialogStatus="dialogAdd.status"
			:cidArr="dialogTableValue"
			 @initRefreshList="handleQuery">
		</aggravateListProgressEdit>

	</el-drawer>
	
	
</template>
<script setup lang="ts">
	import { useRoute } from 'vue-router';
	import _ from 'lodash-es'
	import { feilType } from "@/utils/funcall"
	import { useBaseConfigStore } from "@/store/modules/baseConfig";
	const baseConfigStore = useBaseConfigStore();
	import {BUSINESS_TYPE} from "@/utils/constant";
	
	import aggravateListProgressEdit  from "./aggravateListProgressEdit.vue"
	
	// 获取接口地址
	import {
		getLedgerSchedulelList,
		deleteLedgerSchedule
	} from "@/api/aggravate";
	
	const props = defineProps({
		//数据列表索引值  例如 user ->对应着 vuex  == user_cxxxxx模块
	    dialogTitle: {
	        type: String,
	        default:"添加信息"
	    },
		dialogStatus: {
			type: String,
			default: "add_art"
		},
		dialogTableValue:{
		  type:Object,
		  default: ()=>{},
		}
	});

	const emit = defineEmits(['update:modelValue','initRefreshList']);
	const dialogVisible = ref(false);
	const loading = ref(false);//新增或者修改加载load按钮

	// 数据的data-ref
	const dataList = ref();//首页列表

	const ids = ref<number[]>([]);
	const queryParams = reactive({
	   ledger_id:""
	});
	const dialogAdd = reactive<any>({
		title: "添加信息", //弹窗标题
		visible: false,   //弹窗显示or隐藏
		status:"add_art", //弹窗状态类型  :添加 add_art 编辑 edit_art 详情 detail_art  
		value:{}   		  //携带整条参数 row
	});
	
	// 关闭弹窗
	function closeDialog() {
		emit('update:modelValue',false)
	}
	
	// 打开新增表单内容
	function openDialog(type?:string, item ?: any) {
		if (type == "edit_art") {
			dialogAdd.title = '修改信息';
			dialogAdd.status = "edit_art"
			dialogAdd.value = item;
			dialogAdd.visible = true;
		}
		else if(type == "add_art") {
			dialogAdd.title = '添加信息';
			dialogAdd.status = "add_art"
			dialogAdd.value = {};
			dialogAdd.visible = true;
		}
		else if(type == "detail_art")
		{
			dialogAdd.title = '进度详情';
			dialogAdd.status = "detail_art"
			dialogAdd.value = item;
			dialogAdd.visible = true;
		}	
	}
	
	function handleAdd(){
		
	}
	
	function handleSelectionChange(selection: any) {
	    ids.value = selection.map((item: any) => item.id);
	}
	
	function handleDelete(Id?: number) {
	    const Ids = [Id || ids.value].join(",");
	    if (!Ids) {
	        ElMessage.warning("请勾选删除项");
	        return;
	    }
	    ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
	        confirmButtonText: "确定",
	        cancelButtonText: "取消",
	        type: "warning",
	    }).then(() => {
	        loading.value = true;
	        deleteLedgerSchedule({
	            id:Ids
	        }).then((res)=>{
	            console.log(res)
	            ElMessage({
	                message: '删除成功',
	                type: 'success'
	            })
	            handleQuery();
	        }).finally(()=>{
	            loading.value = false;
	        })
	    }, function () {
	        console.log('取消删除')
	    });
	}
	
	function handleQuery() {
		loading.value = true;
		console.log('加载数据')
		getLedgerSchedulelList(queryParams).then((res) => {
			dataList.value = res.data
			
		}).finally(() => {
			loading.value = false;
		})
	}
	onMounted(() => {
		queryParams.ledger_id = props.dialogTableValue.id;
		handleQuery();
	});
</script>

<style lang="scss" scoped>

</style>